* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: '思源黑体', '微软雅黑', 'SourceHanSansSC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, Serif,
    sans-serif;
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;

  &:active {
    color: inherit;
  }
}

button {
  cursor: pointer;
}

html,
body,
#app {
  background: #161930;
  color: #fff;
}

*,
:root {
  /* 颜色 */
  --primary-color: #7dbfff;

  --panel-color: #213654;

  /* 透明颜色 */
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* 背景颜色 */
  --light-gray-bg: #f2f2f2;

  /* 阴影 */
  --common-shadow: 0 0 16px -4px var(--shadow-color);
  --panel-shadow: 0 10px 16px 0 var(--shadow-color);

  /* 边距 */
  --common-padding: 1.88rem;
  --common-edge: 16px;

  /* 圆角 */
  --common-radius: 10px;

  /* 组件的变量 */
  --many-btn-height: 132px;
  --echarts-width: 630px;
}

.common-container {
  padding: 0 var(--common-padding);
}

/* 【侧边栏】和【底部收缩按钮组】都用到了这个样式 */
.shrink-btn {
  $size: 40px;
  height: $size;
  width: $size;
  border-radius: 100%;
  border: none;
  background: #fff;
  color: #111;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  transform: translateY(50px);
}
.fade-enter-to,
.fade-leave-from {
  transform: translateY(0px);
}
